<template>
    <div class="main-container">
        <div class="main-top">
            <sys-admin/>
        </div>
        <div class="main-bottom">
            <div class="main-bottom-left">
                <sys-role/>
            </div>
            <div class="main-bottom-right">
                <sys-menu/>
            </div>
        </div>
    </div>
</template>

<script>
import SysAdmin from "@/views/modules/sys/sysCfg/compoents/SysAdmin.vue";
import SysMenu from "@/views/modules/sys/sysCfg/compoents/SysMenu.vue";
import SysRole from "@/views/modules/sys/sysCfg/compoents/SysRole.vue";

export default {
    name: "SysCfg",
    components: {SysRole, SysMenu, SysAdmin},
    methods: {}
}
</script>

<style scoped>
.main-container {
    width: 100%;
    height: 100%;

    .main-top {
        width: 100%;
        height: 50%;
    }

    .main-bottom {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-between;

        .main-bottom-left {
            width: 50%;
            height: 100%;
        }

        .main-bottom-right {
            width: 50%;
            height: 100%;
        }
    }
}
</style>
